<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <title>PPT</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta charset="utf-8" />
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: black;
            user-select: none;
        }

        img {
            max-width: 100%;
            max-height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: transparent;
            z-index: 1000;
        }
    </style>
</head>

<body>
    <div id="overlay"></div>
    <img id="slide" src="" />
    <script>
        //-------------------------配置区---------------------------//
        //PPT总数
        const totalSlides = 8;
        //PPT的后缀名
        const suffix = "SVG";
        //必须要求PPT的文件名为00001.svg,00002.svg,00003.svg...的形式，而且应该放在assets文件夹下


        //-----------------分界线，以下代码不要修改--------------------//
        let currentSlide = 1;
        const slideElement = document.getElementById("slide");

        //获取链接中ppt的序号优先跳转
        var hash = window.location.hash;
        if (hash) {
            var slideNumber = parseInt(hash.substring(1));
            if (slideNumber >= 1 && slideNumber <= totalSlides) {
                currentSlide = slideNumber;
            }
        }

        //更新图片
        const updateSlide = () => {
            slideElement.src = `assets/${String(currentSlide).padStart(5, "0")}.${suffix}`;
            // window.location.hash = `#${currentSlide}`;
        };

        const img = new Image();
        img.src = `assets/${String(currentSlide).padStart(5, "0")}.${suffix}`
        updateSlide();
        //加载完第一张图片再检测是否第一次浏览
        window.onload = function () {
            // 检查用户是否已经看到过提示
            if (!localStorage.getItem('hasSeenTooltip')) {
                // 检测设备类型
                const isMobile = /Mobi|Android|iPad|iPhone|iPod/i.test(navigator.userAgent);
                let message;
                if (isMobile) {
                    message = '上一张：点击屏幕上半部分\n下一张：点击屏幕下半部分';
                } else {
                    message = '上一张：←、↑、点击屏幕上半部分、滚轮向上\n下一张：→、↓、点击屏幕下半部分、滚轮向下、空格';
                }
                alert(message);
                // 将提示状态存储到localStorage中
                localStorage.setItem('hasSeenTooltip', true);
            }

            //预加载图片
            for (let i = 1; i <= totalSlides; i++) {
                const img = new Image();
                img.src = `assets/${String(i).padStart(5, "0")}.${suffix}`;
            }
        };

        //监听滚轮事件，上划上一张，下滑下一张
        document.addEventListener("wheel", (event) => {
            if (event.deltaY > 0) {
                currentSlide = currentSlide === totalSlides ? 1 : currentSlide + 1;
            } else {
                currentSlide = currentSlide === 1 ? totalSlides : currentSlide - 1;
            }
            updateSlide();
        });

        //监听点击事件，点击屏幕上半部分上一张，下半部分下一张
        document.addEventListener("click", (event) => {
            if (event.clientY < window.innerHeight / 2) {
                currentSlide = currentSlide === 1 ? totalSlides : currentSlide - 1;
            } else {
                currentSlide = currentSlide === totalSlides ? 1 : currentSlide + 1;
            }
            updateSlide();
        });

        //监听键盘事件，左键和上键上一张，右键和下键和空格下一张
        document.addEventListener('keydown', function (event) {
            if (event.keyCode == 37 || event.keyCode == 38) {
                // 左键和上键
                currentSlide = currentSlide === 1 ? totalSlides : currentSlide - 1;
            }
            else if (event.keyCode == 39 || event.keyCode == 40 || event.keyCode == 32) {
                // 右键和下键和空格
                currentSlide = currentSlide === totalSlides ? 1 : currentSlide + 1;
            }
            updateSlide();
        });
    </script>
</body>

</html>